<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="top">
        <div>
          <el-form ref="searchParams" :model="searchParams" :inline="true">
            <el-form-item label="角色名称" prop="name">
              <el-input class="input" v-model="searchParams.name" maxlength='100' placeholder="请输入角色名称"
                clearable></el-input>
            </el-form-item>
            <el-form-item label="权限字符" prop="key">
              <el-input class="input" v-model="searchParams.key" maxlength='100' placeholder="请输入权限字符"
                clearable></el-input>
            </el-form-item>
            <el-form-item label="租户" prop="openshop" v-if="userModel.role == 'admin'">
              <el-input v-model="searchParams.openshop" maxlength='100' placeholder="请输入考核名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="handleSearch" type="primary" icon="el-icon-search"
                style="margin-left:40px">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-form :model="searchParams" ref="searchParams" :inline="true" style="margin:10px 0">
            <el-button @click="handleCreate" type="primary" icon="el-icon-plus" plain size="small">新增</el-button>
          </el-form>
          <el-table :data="roleList" size='medium' border>
            <el-table-column prop="id" label="id" width="50"></el-table-column>
            <el-table-column prop="name" label="角色名称" show-overflow-tooltip>
              <template slot-scope="scope">
                <jc-button :title="scope.row.name" @click="handleUpdate(scope.$index, scope.row)"></jc-button>
              </template>
            </el-table-column>
            <el-table-column prop="key" label="权限字符" show-overflow-tooltip></el-table-column>
            <el-table-column prop="sort2" label="角色顺序" show-overflow-tooltip></el-table-column>
            <el-table-column prop="createTimeFormat" label="创建时间" show-overflow-tooltip></el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-col style="margin: 20px 0;">
      <pagination style="background: #ffffff; height: 50px" v-show="totalSize > 0" :total="totalSize" :page.sync="page"
        :limit.sync="size" @pagination="findRoleList" />
    </el-col>
    <updateRoleView ref="updateRole" @confirm='findRoleList'></updateRoleView>
  </div>
</template>

<script>
import {
  findRoleList, deleteRole, updateRole
} from '@/api/system/role.js'

import updateRoleView from "@/views/system/role/components/updateRoleView.vue"
export default {
  components: { updateRoleView },
  data() {
    return {
      page: 1,
      size: 20,
      totalSize: 0,
      roleList: null,
      userModel: {},
      searchParams: {
        name: '',
        key: '',
        status: ''
      },
      statusOptions: [
        { key: 0, name: "停用" },
        { key: 1, name: "正常" },
      ]
    }
  },
  created() {
    this.userModel = this.$store.state.user.userModel
    this.findRoleList()
  },
  methods: {
    // 增
    handleCreate() {
      this.$refs.updateRole.show()
    },
    // 删
    handleDelete(index, row) {
      this.$confirm('是否确认删除角色"' + row.name + '"?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return deleteRole({ roleId: row.id })
      }).then(() => {
        this.findRoleList()
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      }).catch(function () { });
    },
    // 改
    handleUpdate(index, row) {
      this.$refs.updateRole.show(row.id)
    },
    handleSearch() {
      this.page = 1
      this.findRoleList()
    },
    resetQuery() {
      this.resetForm('searchParams')
      this.handleSearch()
    },
    findRoleList() {
      this.searchParams.page = this.page
      this.searchParams.size = this.size
      findRoleList(this.searchParams).then(res => {
        if (res.data.code == 10000) {
          this.totalSize = res.data.data.total_count
          this.roleList = res.data.data.list
          this.roleList.forEach(elem => {
            elem.createTimeFormat = this.formatTime.dateFormat('YY-MM-DD hh:mm:ss', elem.createTime)
            elem.statusLabel = elem.status == 1 ? "正常" : "停用"

          })
        }
      });
    },
  },
}
</script>


<style lang="scss" scoped></style>
